<!DOCTYPE html><!--[if lt IE 7]>
<html class="ie ie6"><![endif]-->
<!--[if IE 7 ]>
<html class="ie ie7"><![endif]-->
<!--[if IE 8 ]>
<html class="ie ie8"><![endif]-->
<!--[if IE 9 ]>
<html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>朱小锋-个人简历</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">   
    <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/index.css" />
</head>
<body>
    <!--[if lt IE 10]><div class="kie-bar">
    本页面为CSS3页面，IE9及以下不能正常预览。请
    <a href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" target="_blank">升级IE</a>
    或下载使用
    <a href="https://www.google.com/intl/zh-CN/chrome/browser/" target="_blank" title="谷歌浏览器">谷歌浏览器</a>！
</div>
<style>
    .scene, .warp, .footer{ display: none; }
    .kie-bar {
        height: 24px; line-height: 24px; font-weight: normal; text-align: center; border-bottom: 1px solid #fce4b5;
        background-color: #FFFF9B; color: #e27839; position: relative; font-size: 14px; text-shadow: 0 0 1px #efefef; padding: 5px 0;
    }
    .kie-bar a { color: #08c; text-decoration: none; margin: 0 7px; }
</style><![endif]-->
    <div class="scene">
        <div  data-offset="10" class="star parallax"></div>
        <div  data-offset="30" class="ball parallax"></div>
    </div>
    <div class="warp">
        <div class="info">
            <div  class="head">
                <span class="hi">hi</span>
            </div>
            <h1 class="name">朱小锋</h1>
            <div class="contact">
                <span class="tg"></span>
                <span class="item">工作经验：2.5年</span>
                <span class="item">E-mail：janmifeng@foxmail.com</span>    
                <span class="item">QQ：62794558</span>
                <span class="item">git：<a target="_break" href="http://git.oschina.net/janmi">git.oschina.net/janmi</a></span>

            </div>
        </div>
        <div class="say">
            <span class="circle"></span>
            <span class="circle2">say</span>
            <span class="circle3"></span>
            <span class="circle4"></span>
            <p class="tit txt">
                “不会设计的前端不是一个爱家的好厨师！！”
            </p>
        </div>
        <div class="tool">
            <p class="tit">“ 欲善其事必先利其器 ”</p>
            <div class="tool-cont">
                <ul>
                    <li class="ps"></li>
                    <li class="st"></li>
                    <li class="git"></li>
                    <li class="fb"></li>
                    <li class="svn"></li>
                    <li class="phps"></li>
                </ul>
            </div>
        </div>
        <div class="skill">
            <p class="tit">“ 不一定很精通，但却不能不懂~  ”</p>
            <div class="skill-cont">
                <span class="less">LESS</span>
                <span class="response">响应式</span>
                <span class="seajs">seajs</span>
                <span class="gulp">gulp</span>
                <span class="html5">html5</span>
                <span class="css3">css3</span>
                <span class="jq">jquery</span>
                <span class="iconf">iconfont</span>
                <span class="ajax">Ajax</span>
            </div>
        </div>
        <div class="history">
            <p class="tit">“ 感谢这些年来的成长经历 ”</p>
            <div class="h-cont">
                <div class="area1"></div>    
                <div class="area2"></div>    
                <div class="area3"></div>    
                <div class="area4"></div>    
                <div class="area5"></div>    
                <div class="time-item time-line1">
                    <span class="time">2011年</span>
                    <p>加入工作室学习与制作网站</p>
                </div>
                <div class="time-item time-line2">
                    <span class="time">2013年</span>
                    <p>毕业，退出工作室加入一站网，开始前端开发职业生涯</p>
                </div>
                <div class="time-item time-line3">        
                    <span class="time">2013.9 - 2014.5</span>
                    <p>加入小黑屋项目组，负责试客联盟 .NET转PHP版本前端开发工作</p>
                </div>
                <div class="time-item time-line4">
                    <span class="time">2014.6-7</span>
                    <p>负责新版试客联盟首页响应式改版开发工作</p>
                </div>
                <div class="time-item time-line5">
                    <span class="time">2014.08 — 至今</span>
                    <p>加入众划算项目组，负责前端开发与项目的管理工作</p>
                </div>
            </div>
        </div>
        <div class="works">
            <p class="tit">“ 作品！！ ”</p>
            <ul>
               <li>
                   <span class="w-icon"></span>
                   <span class="w-tit">响应式</span>
                   <a href="http://www.yzwzp.com/zhs/" target="_break" title="">PC端响应式</a>
               </li>
               <li>
                   <span class="w-icon css-icon"></span>
                   <span class="w-tit">CSS3动画</span>
                   <a href="http://www.yzwzp.com/fullpage/" target="_break" title="">APP下载页CSS3动画</a>
               </li>
               <li>
                   <span class="w-icon"></span>
                   <span class="w-tit">响应式</span>
                   <a href="http://www.yzwzp.com/webapp/" target="_break" title="">移动端响应式</a>
               </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="f-cont">
            目前在职，考虑换一份工作，欢迎联系！
        </div>
    </div>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script>
        $(function(){
            $(window).on('mousemove', function(e) {
              var w = $(window).width();
              var h = $(window).height();
              var offsetX = 0.5 - e.pageX / w;
              var offsetY = 0.5 - e.pageY / h;
              $(".parallax").each(function(i, el) {
                var offset = parseInt($(el).data('offset'));
                var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)";
             
                $(el).css({
                '-webkit-transform': translate,
                'transform': translate,
                'moz-transform': translate
                });
              });
            }); 
            var arr = ['.say', '.tool', '.skill', '.history'];      
            var arrClass = ['say-cur', 'tool-cur', 'skill-cur', 'h-cur'];
            var f = function(){
                var t = $(window).scrollTop();
                var b = t+$(window).height();
                for (var i = 0; i < arr.length; i++) {
                    var h_t = $(arr[i]).offset().top;
                    var h_b = h_t + $(arr[i]).height();
                    if(h_t >= t && h_t <= b && h_b <= b){//包含
                        $(arr[i]).addClass(arrClass[i]);
                        break;
                    }else{
                        if(h_t <= t && h_b >= b){
                            $(arr[i]).addClass(arrClass[i]);
                        }
                    }
                };
            };
            f();
            $(window).scroll(f);
        })
    </script>
</body>
</html>